<template>
  <!-- 门诊医生-中医处方-单个中药 -->
  <div class="3xl:w-[12.5%] w-[20%] item-style">
    <div class="flex justify-between w-full px-4">
      <div>{{ currentMedicine.mc }}</div>
      <div>{{ currentMedicine.sl }} g</div>
    </div>
    <div v-if="currentMedicine.jf" class="use-btn">
      <a-input v-model:value="currentMedicine.jf" :bordered="false" class="text-xs cursor-pointer" placeholder="煎法" />
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'

const porps = defineProps({
  medicineItem: {
    type: Object,
    default: () => ({})
  }
})
const currentMedicine = ref(porps.medicineItem)
watch(
  () => porps.medicineItem,
  (newVal) => {
    currentMedicine.value = newVal
  }
)
</script>
<style lang="less" scoped>
.item-style {
  position: relative;
  display: flex;
  align-items: center;
  height: 80px;
  margin-bottom: -1px;
  border-color: var(--border-color);
  border-style: dashed;
  border-right-width: 1px;
  border-bottom-width: 1px;
  .use-btn,
  .delete-btn {
    position: absolute;
  }
  .use-btn {
    bottom: 0;
    left: 0;
  }
  .ant-input {
    pointer-events: none;
  }
}
:deep(.border-b-style) {
  border-radius: 0;
  cursor: pointer;
}
.input-style {
  :deep(.ant-input) {
    padding-right: 4px;
    text-align: center !important;
  }
}
</style>
